<template>
    <section style="padding: 24px; background:#fff;">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <div class="table-operator">
                <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </div>
            <!-- table区域-begin -->
            <div style="margin-top: 20px;">

                <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange">
                    <template slot="logoslot" slot-scope="text, record">
                        <div class="anty-img-wrap">
                            <a-avatar :src="record.logo" icon="user" v-if="record.logo" />
                            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" icon="user" v-else />
                        </div>
                    </template>

                    <span slot="action" slot-scope="text, record">
                        <a @click="handleEdit(record)">编辑</a>

                        <a-divider type="vertical" />
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                            <a>删除</a>
                        </a-popconfirm>

                    </span>
                </a-table>
            </div>
            <!-- table区域-end -->
        </div>
        <add-friend-link ref="addfriendlink" @ok="getData"></add-friend-link>
    </section>
</template>
<script>
import { listFriendLinks, deleteFriendLink } from "@/api/api";
import AddFriendLink from './modules/AddFriendLink.vue';
const columns = [
    {
        title: '名称',
        dataIndex: 'name',
        align: "center",
    },
    {
        title: 'logo',
        align: "center",
        dataIndex: 'logo',
        scopedSlots: { customRender: "logoslot" }
    },
    {
        title: '跳转地址',
        dataIndex: 'url',
        align: "center",
        ellipsis: true
    },
    {
        title: '状态',
        align: "center",
        width: 80,
        dataIndex: 'state',
        customRender(text) {
            if (text == 0) {
                return '冻结';
            } else if (text == 1) {
                return '正常';
            }
        }
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: "center",
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: "center",
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: "center",
        width: 120,
        align: "center",
    }];
export default {
    components: { AddFriendLink },
    data() {
        return {
            /* 数据源 */
            dataSource: [],
            columns,
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '15', '20'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            /* table加载状态 */
            loading: false,
        }
    },
    methods: {
        handleAdd(){
            this.$refs.addfriendlink.add();
            this.$refs.addfriendlink.title="添加友链";
        },
        handleEdit(record){
             this.$refs.addfriendlink.edit(record);
            this.$refs.addfriendlink.title="编辑友链";
        },
        handleDelete(record) {
            deleteFriendLink(record).then((res) => {
                if (res.code === 200) {
                    this.$message.success('删除成功')
                    this.$refs.table.refresh()
                } else {
                    this.$message.error('删除失败：' + res.message)
                }
            })
        },
        //获取数据
        getData(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            let pageNo = this.ipagination.current;
            let pageSize = this.ipagination.pageSize;
            this.loading = true;
            listFriendLinks(pageNo, pageSize).then(res => {
                if (res.code == 200) {
                    let resData = res.data;
                    this.loading = false;
                    this.dataSource = resData.records;

                    if (resData.total) {
                        this.ipagination.total = resData.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                } else {
                    this.loading = false;
                }
            })
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            this.ipagination = pagination;
            this.getData();
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
    },
    mounted() {
        this.getData();
    },
}
</script>